<template>
  <view class="success-list-page">
    <!-- 头部导航 -->
    <myHeader :title="type === 'visits' ? '热门案例' : '猜你喜欢'" showBack />
    <view style="padding: 32rpx">
      <view class="recommend">
        <view
          class="mission-list-item"
          v-for="(item, index) in successList"
          :key="index"
          @click="goToDetail(item)"
        >
          <view class="number">
            <image
              src="https://www.rebirthealth.com/static/images/no1.png"
              alt=""
              v-if="index == 0"
            ></image>
            <image
              src="https://www.rebirthealth.com/static/images/no2.png"
              alt=""
              v-else-if="index == 1"
            ></image>
            <image
              src="https://www.rebirthealth.com/static/images/no3.png"
              alt=""
              v-else-if="index == 2"
            ></image>
            <view v-else class="index">{{ index + 1 }}</view>
          </view>
          <view class="summary">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import myHeader from "@/component/header";
import { getSuccessList } from "@/api";
export default {
  components: {
    myHeader,
  },
  data() {
    return {
      successList: [],
      type: "visits",
    };
  },
  onLoad(options) {
    this.type = options.type;
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getSuccessList({
        pageNo: 1,
        pageSize: 10,
        orderBy: this.type,
        status: 0,
      });
      this.successList = res.list;
    },
    goToDetail(data) {
      uni.navigateTo({
        url: `/pages/success/successDetail?caseId=${data.caseId}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.success-list-page {
  background-color: rgba(19, 30, 50, 1);
  min-height: 100vh;
  color: #fff;
  .recommend {
    background: #fff;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
  }
  .mission-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .number {
      background: rgba(210, 229, 246, 0.4);
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      image {
        width: 100%;
        height: 100%;
      }

      .index {
        font-size: 30rpx;
        color: #425f9b;
        font-weight: bold;
      }
    }

    .summary {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
</style>